/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

import {NavigationContainer, Page} from './components';
import * as testSuiteByName from './test';
import {PortalProvider} from '@gorhom/portal';

function App(): React.JSX.Element {
  return (
    <View style={{backgroundColor: 'black'}}>
      <StatusBar barStyle="light-content" />
      <SafeAreaView>
        <NavigationContainer>
          <PortalProvider>
            <View id="__harmony::ready" />

            {Object.keys(testSuiteByName).map(testSuiteName => {
              const TestSuite =
                testSuiteByName[testSuiteName as keyof typeof testSuiteByName];
              return (
                <Page
                  key={testSuiteName}
                  name={`${testSuiteName.replace('Test', '')}`}>
                  <View style={{flex: 1}}>
                    <ScrollView style={{flex: 1}}>
                      <TestSuite key={testSuiteName} />
                    </ScrollView>
                  </View>
                </Page>
              );
            })}
          </PortalProvider>
        </NavigationContainer>
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;
